<template>
  <div class="gaodeMap">
    <div id="container"></div>
    <div class="drag">
      <div class="left">
				<img src="../../assets/gaode.png" alt />
        <span>
          <p class="Bold">拖动节点可编辑围栏</p>
          <p>高德提供企业默认围栏,将该企业周边500米设为默认围栏</p>
        </span>
      </div>
      <div class="right">
        <a-button class="border">后退</a-button>
        <a-button type="primary">确定</a-button>
      </div>
			<a-icon class="icon" type="close-circle" @click="close" />
    </div>
  </div>
</template>

<script>
	export default {
		name: 'gaodeMap',
		props: ['current'],
		data () {
			return {
				// map: undefined
			}
		},
		mounted () {
			/* eslint-disable */
			let map = undefined
			// window.onLoad = function () {
			map = new AMap.Map('container', {
				zoom: 14, //级别
				center: [113.950502, 22.531939] //中心点坐标
			})
			new AMap.Marker({
				map: map,
				position: [113.950502, 22.531939]
			})

			var path = [
				[113.950486, 22.533031],
				[113.949042, 22.531242],
				[113.951897, 22.531265]
			]
			var polygon = new AMap.Polygon({
				path: path
			})
			map.add([polygon]);
			map.setFitView();

			var polyEditor = new AMap.PolygonEditor(map);
			polyEditor.addAdsorbPolygons([polygon]);
			polyEditor.on('add', function (data) {
				var poly = data.target;
				polyEditor.addAdsorbPolygons(poly);
				poly.on('dblclick', () => {
					polyEditor.setTarget(poly);
					polyEditor.open();
				})
			})

			polygon.on('dblclick', () => {
				polyEditor.setTarget(polygon);
				polyEditor.open();
			})
			/* eslint-enable */
		},
		methods: {
			close () {
				this.$emit('update:current', '1')
			}
		}
	}
</script>

<style scoped lang="less">
	.gaodeMap {
		height: 100%;
		#container {
			width: 100%;
			height: calc(~"100% - 140px");
		}
		.drag {
			background: @whiteBg;
			padding: 20px;
			display: flex;
			height: 140px;
			position: relative;
			.left {
				flex: 1;
				display: flex;
				img {
					width: 100px;
					margin-right: 20px;
				}
				span {
					p {
						margin: 0;
					}
					:first-child {
						margin-bottom: 20px;
					}
				}
				.Bold {
					font-size: @font26;
					font-weight: bold;
				}
			}
			.right {
				flex: 1;
				text-align: center;
				line-height: 4;
				.border {
					border: 1px solid red;
					margin-right: 80px;
				}
			}
			.icon {
				position: absolute;
				top: 20px;
				right: 20px;
				font-size: @font50;
			}
		}
	}
</style>
